<template>
    <div class="label-link-page">
        <el-card shadow="never">
            <div class="mt-3" v-loading="loading">
                <el-table :data="data">
                    <el-table-column
                    type="index"
                    align="center"
                    label="序号"
                    width="50"/>
                    <el-table-column label="名称" prop="name"/>
                    <el-table-column label="关联岗位角色名称" prop="post_name"/>
                    <el-table-column label="颜色">
                        <template slot-scope="{row}">
                            <div class="w-10 h-10" :style="{background: row.merit_color}"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="onDialog(row)">关联岗位角色&设置颜色</el-button>
                            <el-button type="text" @click="onResetBind(row)">重置关联角色</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

        <el-dialog
            title="选择岗位角色&颜色"
            :visible.sync="visible"
            width="40%"
            class="selector">
            <el-form label-width="100px">
                <el-form-item label="岗位角色">
                    <el-select class="input-width" v-model="dialogForm.label_id" placeholder="请选择岗位角色">
                        <el-option
                            v-for="item in labelTypeOption"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序">
                    <el-select class="input-width" v-model="dialogForm.sort" placeholder="请选择权重">
                        <el-option
                            v-for="item in data.length"
                            :key="item"
                            :value="item"
                            :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="岗位角色">
                    <el-color-picker v-model="dialogForm.merit_color"></el-color-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="text-center">
                <el-button :loading="loading" type="primary" @click="onBind">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { ColorPicker } from 'element-ui';

export default {
    components: {
        ElColorPicker: ColorPicker,
    },
    mixins: [require('@/mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            visible: false,
            data: [],
            labelTypeOption: [],
            dialogForm: {
                id: '',
                label_id: '',
                sort: '',
                merit_color: '',
            },
        };
    },
    watch: {
        visible(e) {
            if (!e) {
                this.dialogForm = {
                    id: '',
                    label_id: '',
                    sort: '',
                    merit_color: '',
                };
            }
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('label/label_type').then((res) => {
                this.data = res;
            }).finally(() => {
                this.loading = false;
            });
        },

        fetchLabel() {
            API.get('label/group', {params: {companyId: 0}}).then((res) => {
                this.labelTypeOption = res.labels.filter(item => {
                    if (!item.type) return false;
                    return item.type.indexOf('1') > -1;
                });
            });
        },

        onBind() {
            if (!this.dialogForm.label_id) return $ele.$message.warning('请选择岗位角色');
            this.loading = true;

            const form = {
                ...this.dialogForm,
                sort: this.dialogForm.sort || 0,
            };
            API.post('label/label_type', form).then(() => {
                $ele.$message.success('绑定成功');
                this.onDialog();
                this.fetchData();
            }).finally(() => this.loading = false);
        },

        onResetBind({id}) {
            $ele.$confirm('是否重置此岗位角色关联数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.post(`label/label_type/reset/${id}`).then(() => {
                    $ele.$message.success('重置成功');
                    this.fetchData();
                }).finally(() => this.loading = false);
            }).catch();
        },

        onDialog(e) {
            if (e) {
                this.dialogForm.id = e.id;
                this.dialogForm.label_id = e.label_id || '';
                this.dialogForm.sort = e.sort || '';
                this.dialogForm.merit_color = e.merit_color;
            }
            this.visible = !this.visible;
        },
    },
    mounted() {
        this.fetchData();
        this.fetchLabel();
    },
};
</script>

<style lang="scss" scoped>
.el-select {
    width: 300px;
}

.label-width {
    display: inline-block;
    width: 60px;
    text-align: right;
}
</style>
